<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        nav {
            font-size: 1.5rem;
            background-color: #21D4FD;
            background-image: -webkit-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -moz-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -o-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
        }
        h1 {
            font-size: 2rem;
            color: white;
        }
        li {
            margin: 10px 20px;
        }
        #searchBox {
            width: 300px;
            float: right;
        }
    </style>
</head>
<body>
<!--导航栏替换-->
<div th:replace="~{commons/commons :: topbar(active='readers.html')}"></div>

<div class="container" style="margin-top: 40px">
    <a th:href="@{/admin/reader/toAdd}" class="btn btn-outline-primary btn-lg">添&nbsp;&nbsp;&nbsp;&nbsp;加</a>
    <form th:action="@{/admin/book/searchReader}" id="searchBox">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="输入关键词..." name="keyword">
            <input type="submit" class="input-group-append btn btn-success" value="搜  索">
        </div>
    </form>
    <div style="clear: both"></div>
    <table class="table table-hover" style="margin-top: 20px">
        <thead>
        <tr>
            <th>卡号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>生日</th>
            <th>地址</th>
            <th>电话</th>
            <th>状态</th>
            <th></th>
            <th></th>
            <th>操作</th>
            <th></th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="reader, readerStat: ${readers}">
            <td th:text="${reader.getUsername()}"></td>
            <td th:text="${reader.getName()}"></td>
            <td th:text="${reader.getSex()}"></td>
            <td th:text="${#dates.format(reader.getBirth(),'yyyy-MM-dd')}"></td>
            <td th:text="${reader.getAddress()}"></td>
            <td th:text="${reader.getTelcode()}"></td>
            <div th:switch="${reader.getState()}">
                <td th:case="0" style="color:green">正常</td>
                <td th:case="1" style="color:red">挂失</td>
                <td th:case="2" style="color:gray">停借</td>
            </div>
            <td><a th:href="@{'/admin/reader/state/' + ${reader.getReaderId()} + '/0'}" class="btn btn-outline-success">恢复</a></td>
            <td><a th:href="@{'/admin/reader/state/' + ${reader.getReaderId()} + '/1'}" class="btn btn-outline-danger">挂失</a></td>
            <td><a th:href="@{'/admin/reader/state/' + ${reader.getReaderId()} + '/2'}" class="btn btn-outline-dark">停借</a></td>
            <td><a th:href="@{'/admin/reader/toUpdateReader/' + ${reader.getUsername()}}" class="btn btn-outline-info">修改</a></td>
        </tr>
        </tbody>
    </table>
</div>


<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>